<template>
  <el-main>
    <h1>问题答案</h1>
    <el-table :data="answerAndScore" stripe style="width: 100%" border>
      <el-table-column label="选项" prop="answer"></el-table-column>
      <el-table-column label="分值" prop="score"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addDialogVisible" title="新增选项" width="30%">
      <span>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px" status-icon>
          <el-form-item label="选项" prop="answer">
            <el-input v-model="ruleForm.answer" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="分值" prop="score">
            <el-input v-model="ruleForm.score" autocomplete="off" type="number"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
          </el-form-item>
        </el-form>
      </span>
    </el-dialog>
    <div style="margin-top: 20px">
      <el-button @click="addDialogVisible = true">新增选项</el-button>
      <el-button @click="backHome()">返回</el-button>
    </div>
  </el-main>
</template>

<script>
export default {
  name: "Answer",
  data() {
    return {
      answerAndScore: [],
      questionnaireId: 0,
      questionId: 0,
      addDialogVisible: false,
      ruleForm: {
        answer: '',
        score: ''
      },
      rules: {
        answer: [
          {required: true, message: '请输入选项', trigger: 'blur'}
        ],
        score: [
          {required: true, message: '请输入分值', trigger: 'blur'}
        ]
      }
    }
  },
  created() {
    if (this.$store.state.token == null) this.$router.push({path: "/login"});
    this.questionnaireId = this.$route.params.questionnaireId;
    this.questionId = this.$route.params.questionId;
    this.$axios({
      // 通过axios向后端发送请求
      method: "get",
      url: "/questionnaire/" + this.questionnaireId + "/" + this.questionId + "/all"
    }).then(res => {
      // console.log(res);
      var data = res.data;
      if (data.code == 200) {
        let answerData = data.data;
        this.answerAndScore = [];
        if (answerData.answer != null) {
          for (let i = 0; i < answerData.answer.length; i++) {
            this.answerAndScore.push({answer: answerData.answer[i], score: answerData.score[i]});
          }
        }
      } else {
        this.$message({
          message: data.msg,
          type: "error"
        });
        this.$router.push({path: "/"});
      }
    });
  },
  methods: {
    handleDelete(index, row) {
      // console.log(index, row);
      this.$axios({
        // 通过axios向后端发送请求
        method: "delete",
        url: "/questionnaire/" + this.questionnaireId + "/" + this.questionId + "/deleteAnswer",
        data: {
          answer: row["answer"],
          score: row["score"]
        }
      }).then(res => {
        // console.log(res);
        var data = res.data;
        if (data.code == 200) {
          this.$message({
            message: row["answer"] + "删除成功",
            type: "success"
          });
          this.$router.replace("/refresh");
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
          this.$router.push({path: "/"});
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios({
            // 通过axios向后端发送请求
            method: "post",
            url: "/questionnaire/" + this.questionnaireId + "/" + this.questionId + "/add",
            data: {
              answer: this.ruleForm.answer,
              score: this.ruleForm.score
            }
          }).then(res => {
            // console.log(res);
            var data = res.data;
            if (data.code == 200) {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.$router.replace({path: "/refresh"});
            } else {
              this.$message({
                message: data.msg,
                type: "error"
              });
            }
          });
        } else {
          this.$message({
            message: "信息不全",
            type: "error"
          });
          return false;
        }
        this.addDialogVisible = false;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addDialogVisible = false;
    },
    backHome() {
      this.$router.go(-1);
    }
  }
}
</script>